<template>
    <div id="sellers">
        <div class="sellers-top">
            <div class="seller-message">
                <div class="seller-name">{{seller.name}}</div>
                <div class="seller-desc">
                    <star :score="seller.score" :size="size"></star>
                    <span class="seller-sold">(661)</span>
                    <span class="sold-month">月售690</span>
                </div>
                <div class="collection">
                    <div class="collection-icon icon-favorite"></div>
                    <div class="collection-desc">已收藏</div>
                </div>
            </div>
            <div class="sell-message">
                <div class="start-delivery message-item">
                    <div class="title">起送价</div>
                    <div class="start-price desc"><span class="price">{{seller.minPrice}}</span>元</div>
                </div>
                <div class="seller-delivery message-item">
                    <div class="title">商家配送</div>
                    <div class="seller-price desc"><span class="price">{{seller.deliveryPrice}}</span>元</div>
                </div>
                <div class="average-time message-item">
                    <div class="title">平均配送时间</div>
                    <div class="time desc"><span class="price">{{seller.deliveryTime}}</span>分钟</div>
                </div>
            </div>
        </div>

        <div class="seller-module">
            <activity :supports="seller.supports" :bulletin="seller.bulletin"></activity>    
        </div>
        <div class="seller-module">
            <scene :pics="seller.pics"></scene>
        </div>
        <div class="seller-module">
            <sellermessage :infos="seller.infos"></sellermessage>
        </div>

        <shopcart :deliveryPrice="seller.deliveryPrice" :minPrice="seller.minPrice"></shopcart>

    </div>
</template>

<script>
import Star from "./star.vue";
import activity from "./activity.vue";
import scene from "./scene.vue";
import sellermessage from "./sellermessage.vue";
import shopcart from "./shopcart";
import mapState from "vuex";

export default {
    name: "sellers",
    props: {
        seller: {
            type: Object
        }
    },
    data() {
        return {
            msg: "sellers",
            size: 24
        }
    },
    components: {
        Star,
        activity,
        scene,
        sellermessage,
        shopcart
    }
}
</script>

<style lang="stylus" ref="stylesheet/stylus">
@import "../assets/stylus/index.styl";
#sellers
    background-color #f3f5f7
    margin-bottom 48px
    .sellers-top
        background-color #fff
        border-1px(rgba(7, 17, 27, .1))
        padding 18px
        .seller-message
            border-1px(rgba(7, 17, 27, .1))
            position relative
            padding-bottom 18px
            .seller-name
                font-size 14px
                color rgb(7, 17, 27)
                line-height 14px
            .seller-desc
                margin-top 8px
                display flex
                align-items center
                .seller-sold
                    font-size 10px
                    color rgb(77, 85, 93)
                    line-height 18px
                    margin-left 8px
                .sold-month 
                    font-size 10px
                    color rgb(77, 85, 93)
                    line-height 18px
                    margin-left 12px
            .collection
                position absolute
                right 0
                top 0
                display flex
                flex-direction column
                justify-content center
                align-items center
                .collection-icon
                    font-size 24px
                    color rgb(240, 20, 20)
                    line-height 24px
                .collection-desc
                    font-size 10px
                    color rgb(77, 85, 93)
                    line-height 10px
                    margin-top 8px 
        .sell-message
            margin-top 20px
            display flex
            .message-item
                flex 1
                text-align center
                .title
                    font-size 10px
                    color rgb(147, 153, 159)
                    line-height 10px
                    margin-bottom 8px
                .desc
                    font-size 10px
                    font-weight 500
                    color rgb(7, 17, 27)
                    line-height 24px
                    .price
                        font-size 24px
                        margin-right 3px
            .start-delivery, .seller-delivery
                border-right 1px solid rgba(7, 17, 27, .1)

    .seller-module
        padding 18px 18px 0 18px
        margin-top 16px 
        background-color #ffffff
        border-top 1px solid rgba(7, 17, 27, .1)
        border-bottom 1px solid rgba(7, 17, 27, .1)
</style>

